<template>
	<div class="cont">
		<h2>Members</h2>
		<p class="item" v-for="person in members">
			<span class="detail">{{person.name}}</span>
			<span class="detail">{{person.age}}</span>
			<span class="detail">{{person.sex}}</span>
			<span class="detail">{{person.interest}}</span>
		</p>
	</div>
</template>

<script>
export default{
	name:'Members',
	data(){
		return{
			members:[
				{
					name:'Zoe',
					sex:'F',
					age:19,
					interest:'Fine Arts'
				},
				{
					name:'Timmy',
					sex:'M',
					age:22,
					interest:'Basketball'
				},{
					name:'Dick',
					sex:'M',
					age:19,
					interest:'Basketball'
				},{
					name:'Billy',
					sex:'M',
					age:16,
					interest:'Music'
				},{
					name:'Kitty',
					sex:'F',
					age:15,
					interest:'Fine Arts'
				}
			]
		}
	}
}
</script>

<style scoped>
	.cont{
		color:#98afc7;
		padding-left: 20px;
	}
	.item{
		border-bottom: 1px solid #98afc7;
		padding: 10px;
	}
	.detail{
		display: inline-block;
		border-right: 1px solid #98afc7;
		padding-right: 10px;
		width:120px;
	}
</style>